<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="ui-images.html#">Dropdown One</a>
                        <a class="dropdown-item" href="ui-images.html#">Dropdown Two</a>
                        <a class="dropdown-item" href="ui-images.html#">Dropdown Three</a>
                        <a class="dropdown-item" href="ui-images.html#">Dropdown Four</a>
                    </div>
                </div>

                <h4 class="page-title">图片</h4>
               <p class="text-muted page-title-alt">欢迎来到Ubold管理面板 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="m-t-0 header-title">图片</h4>
                            <p class="text-muted m-b-30 font-13">
                                将 <code>&lt;img&gt;</code> 元素添加到元素中，以便在任何项目中轻松调整图像样式.
                            </p>

                            <div class="row">
                                <div class="col-sm-4">
                                    <img src="assets/images/small/img1.jpg" alt="image"
                                         class="img-fluid rounded" width="200"/>
                                    <p class="m-t-15 m-b-0">
                                        <code>.rounded</code>
                                    </p>
                                </div>

                                <div class="col-sm-4">
                                    <img src="assets/images/users/avatar-6.jpg" alt="image"
                                         class="img-fluid rounded-circle" width="120"/>
                                    <p class="m-t-15 m-b-0">
                                        <code>.rounded-circle</code>
                                    </p>
                                </div>

                                <div class="col-sm-4">
                                    <img src="assets/images/small/img3.jpg" alt="image"
                                         class="img-fluid img-thumbnail" width="200"/>
                                    <p class="m-t-15 m-b-0">
                                        <code>.img-thumbnail</code>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5 col-md-offset-1 m-t-sm-50">
                            <h4 class="m-t-0 header-title"><b>图像大小</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                Add classes to an <code>&lt;img&gt;</code> 元素添加到元素中，以便在任何项目中轻松调整图像样式
                            </p>

                            <div class="row">
                                <div class="col-sm-4">
                                    <img src="assets/images/users/avatar-5.jpg" alt="image"
                                         class="img-fluid thumb-lg"/>
                                    <p class="m-t-15">
                                        <code>.thumb-lg</code>
                                    </p>
                                </div>

                                <div class="col-sm-4">
                                    <img src="assets/images/users/avatar-3.jpg" alt="image"
                                         class="img-fluid thumb-md"/>
                                    <p class="m-t-15">
                                        <code>.thumb-md</code>
                                    </p>
                                </div>

                                <div class="col-sm-4">
                                    <img src="assets/images/users/avatar-4.jpg" alt="image"
                                         class="img-fluid thumb-sm"/>
                                    <p class="m-t-15">
                                        <code>.thumb-sm</code>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- ===== MEDIA ==== -->

        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <h4 class="m-t-0 header-title">默认媒体对象</h4>
                    <p class="text-muted m-b-30 font-13">默认媒体在内容块的左侧或右侧显示媒体对象（图像，视频，音频）。</p>
                    <div>
                        <div class="media">
                            <img class="d-flex mr-3 rounded-circle" src="assets/images/users/avatar-1.jpg" alt="Generic placeholder image" height="64">
                            <div class="media-body">
                                <h5 class="mt-0">媒体标题</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                            </div>
                        </div>


                        <div class="media">
                            <img class="d-flex mr-3 rounded-circle" src="assets/images/users/avatar-2.jpg" alt="Generic placeholder image" height="64">
                            <div class="media-body">
                                <h5 class="mt-0">Media heading</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

                                <div class="media mt-3">
                                    <a class="d-flex pr-3" href="ui-images.html#">
                                        <img src="assets/images/users/avatar-3.jpg" alt="Generic placeholder image" height="64" class="rounded-circle">
                                    </a>
                                    <div class="media-body">
                                        <h5 class="mt-0">Media heading</h5>
                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="media">
                            <div class="media-body">
                                <h5 class="mt-0 mb-1">Media object</h5>
                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                            </div>
                            <img class="d-flex ml-3 rounded-circle" src="assets/images/users/avatar-4.jpg" alt="Generic placeholder image" height="64">
                        </div>

                    </div>
                </div>
            </div>
        </div> <!-- end row -->

        <!-- Media alignment -->

        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <h4 class="m-t-0 header-title">信息对齐</h4>
                    <p class="text-muted m-b-30 font-13">图像或其他媒体可以对齐顶部，中部或底部。默认是顶部对齐。</p>

                    <div>
                        <div class="media">
                            <img class="d-flex align-self-start rounded mr-3" src="assets/images/users/avatar-5.jpg" alt="Generic placeholder image" height="64">
                            <div class="media-body">
                                <h5 class="mt-0">Top-aligned media</h5>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                            </div>
                        </div>

                        <div class="media">
                            <img class="d-flex align-self-center rounded mr-3" src="assets/images/users/avatar-6.jpg" alt="Generic placeholder image" height="64">
                            <div class="media-body">
                                <h5 class="mt-0">Center-aligned media</h5>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                            </div>
                        </div>

                        <div class="media">
                            <img class="d-flex align-self-end rounded mr-3" src="assets/images/users/avatar-7.jpg" alt="Generic placeholder image" height="64">
                            <div class="media-body">
                                <h5 class="mt-0">Bottom-aligned media</h5>
                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div> <!-- end row -->

        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>